<template>
	<view class="qdHomePage" :data-theme="theme" :class="theme" :style="globalColor.style">
		<!-- #ifdef H5 -->
		<HeadCustom :title="title" :isAppBtn="!isApp" :isHome="!isApp"></HeadCustom>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<HeadCustom title="本无签" :isAppBtn="false" :isHome="true"></HeadCustom>
		<!-- #endif -->
		<view class="header_search">
			<u--input
				style="margin:10rpx 24rpx 0 24rpx"
				@input="keyWordChange"
				placeholderStyle="color:#747986"
				prefixIcon="search"
				shape="circle"
				placeholder="请输入活动/会议"
				border="none"
				v-model="keyWord"
			></u--input>
			<Calendar ref="calendarRef" v-if="!keyWord" :open="false" :markDays="markDays" :disabledAfter="false" @selectDate="selectDate" @changeMonth="changeMonth"></Calendar>
		</view>

		<view class="bwq_box">
			<scroll-view
				scroll-y="true"
				:refresher-background="backSwiperColor"
				@refresherrefresh="refresherrefreshView"
				:scroll-top="scrollTop"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
				@scrolltolower="scrolltolower"
				style="height: 100%;"
				@scroll="scroll"
			>
				<view class="bwqMsg" v-for="(item, index) in conferenceList" :key="index">
					<view class="img_box" @tap="viewQdDetal(item)"><image class="banner_img" :src="item.themeBanner" mode="aspectFill"></image></view>
					<view class="basicsMsg fboxCol" @tap="viewQdDetal(item)">
						<view class="fboxRow Xbetween">
							<view class="schoolName font32 font-ell1">{{ item.themeName }}</view>
							<text class="hyzt" :style="{ color: colorObj[item.conferenceShowStatus], background: backColor[item.conferenceShowStatus] }" style="flex-shrink: 0;">
								{{ shztObj[item.conferenceShowStatus] }}
							</text>
						</view>
						<text class="qdaddress font28 mt20">{{ formatDate(item.gmtStart) }} - {{ formatDate(item.gmtEnd) }}</text>
						<text class="qdaddress font28 mt20">{{ item.address }}</text>
					</view>
				</view>
				<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { conferencePage, conferenceTime } from '@/api/h5.js';
import Calendar from '../components/calendar/index.vue';
import { throttle, getRequest } from '@/static/js/common.js';
import { utf8to16, base64decode } from '@/static/js/Base64.js';
export default {
	components: { Calendar },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			keyWord: '',
			activityTime: '',
			isApp: 0,
			triggered: false,
			scrollTop: 0,
			page: {
				current: 1,
				size: 20,
				total: 0
			},
			listConfig: {
				loading: ''
			},
			conferenceList: [],
			shztObj: {
				0: '未开始',
				1: '进行中',
				2: '已结束'
			},

			// colorObj: {
			// 	0: '#747986', // 未开始
			// 	1: '#FFD9B5', // 进行中
			// 	2: '#FE6850' // 已结束
			// },
			colorObj: {
				0: '#4179C5', // 未开始
				1: '#39A168', // 进行中
				2: '#6D6D76' // 已结束
			},
			// backColor: {
			// 	0: '#1E222F', // 未开始
			// 	1: 'rgba(255,217,181,0.1)', // 进行中
			// 	2: 'rgba(254,104,80,0.1)' // 已结束
			// },
			backColor: {
				0: 'rgba(65,121,197,0.15)', // 未开始
				1: 'rgba(57,161,104,0.15)', // 进行中
				2: '#E8EDF1' // 已结束
			},
			conferenceId: '',
			markDays: [],
			changeTime: '',
			title: '',
			backSwiperColor:''
		};
	},
	onLoad(option) {
		if (option && option.benwu) {
			let benwu = utf8to16(base64decode(option.benwu));
			const token = {
				access_token: getRequest(benwu, 'token'),
				statusBarHeight: getRequest(benwu, 'statusBarHeight')
			};
			getApp().globalData.statusBarHeight = token.statusBarHeight;
			uni.setStorageSync('bw_params', JSON.stringify(token));
		}
		if (option && option.conferenceId) {
			this.conferenceId = option.conferenceId;
		}
		if (option && option.isApp) {
			getApp().globalData.isApp = option.isApp;
			this.isApp = option.isApp;
			const { bw_link } = getApp().getBWData(['bw_link']);
			bw_link.isApp = option.isApp;
			uni.setStorageSync('bw_link', JSON.stringify(bw_link));
			this.title = '本无签';
		} else {
			uni.setNavigationBarTitle({
				title: `本无签`
			});
		}
		// 获取当前年月
		this.getNowDate();
		this.getConferenceData();
		this.getConferenceTime();
	},
	onPullDownRefresh() {
		this.page.size = 20;
		this.getConferenceData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	watch: {
		globalColor: {
			handler(newVal) {
				if (newVal) {
					this.backSwiperColor = newVal.bottomPopupBackTwoColor;
				}
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		// 自定义下拉刷新
		refresherrefreshView() {
			this.page.size = 20;
			this.getConferenceData();
			this.triggered = true;
			setTimeout(() => {
				this.triggered = false;
			}, 1000);
		},
		// 滚动到底部
		scrolltolower() {
			if (this.page.size * this.page.current <= this.page.total) {
				this.page.size += 10;
				this.listConfig.loading = 'loadmore';
				this.getConferenceData();
			} else {
				this.listConfig.loading = 'nomore';
			}
		},
		scroll(data) {
			// 滑到顶部如果日历是收起状态则打开
			// if (data.detail.scrollTop == 0) {
			// 	if (!this.$refs.calendarRef.monthOpen) {
			// 		this.$refs.calendarRef.toggle();
			// 	}
			// }
			if (data.detail.deltaY < 0) {
				// 如果日期是打开状态则收起
				if (this.$refs.calendarRef.monthOpen) {
					this.$refs.calendarRef.toggle();
				}
			}
			// this.scrollTop = data.detail.scrollTop;
		},
		// 获取当前日期
		getNowDate() {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			if (month < 10) {
				month = '0' + month;
			}
			if (day < 10) {
				day = '0' + day;
			}
			// this.activityTime = year + '-' + month + '-' + day;
			this.changeTime = year + '-' + month;
		},
		keyWordChange: throttle(function() {
			this.getConferenceData();
		}, 1000),
		// 关键字搜索
		searchData() {
			this.getConferenceData();
		},
		// 日期组件选中日期
		selectDate(data) {
			this.activityTime = data.choose;
			this.scrollTop = 0;
			this.getConferenceData();
		},
		// 改变日期月份
		changeMonth(data) {
			this.changeTime = data.year + '-' + data.month;
			this.getConferenceTime();
		},
		// 查询会议标记时间
		getConferenceTime() {
			conferenceTime({ month: this.changeTime }).then(res => {
				if (res.data) {
					const arr = res.data;
					this.markDays = [];
					arr.forEach(item => {
						this.markDays.push(item.split(' ')[0]);
					});
				}
			});
		},
		// 获取会议数据
		getConferenceData() {
			this.listConfig.loading = 'loading';
			const obj = {
				themeName: this.keyWord,
				activityTime: this.keyWord ? '' : this.activityTime,
				conferenceId: this.conferenceId
			};
			conferencePage({ ...this.page, ...obj }).then(res => {
				if (res.data) {
					this.conferenceList = res.data.list;
					this.page.total = res.data.total;
					this.listConfig.loading = 'nomore';
				}
			});
		},
		formatDate(time) {
			let date = time.split(' ')[0];
			return date.replaceAll('-', '.');
		},
		// 跳转详情界面
		viewQdDetal(data) {
			this.$pageTo('/bwSign/qdDetail?conferenceId=' + data.conferenceId);
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-input-input {
	color: var(--contentFontFourColor);
	font-size: 30rpx;
}
::v-deep .u-icon__icon {
	font-size: 36rpx !important;
}
::v-deep uni-input {
	overflow: unset !important;
}
::v-deep .uni-input-placeholder {
	font-size: 28rpx;
	overflow: unset;
}
::v-deep .u-input {
	background-color: var(--searchViewBackColor);
	height: 64rpx;

	.u-input__content {
		padding: 0 20rpx;
	}
}
.qdHomePage {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--controllerBgColor);
	.header_search {
		// position: fixed;
		// z-index: 1;
		// background-color: #1a1d25;
		// height: 300px;
	}
	.bwq_box {
		padding: 24rpx;
		overflow: auto;
		flex: 1;
		.bwqMsg {
			background-color: var(--viewBgColor);
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			.basicsMsg {
				padding: 40rpx 20rpx;
				.qdaddress {
					font-weight: 400;
					line-height: 40rpx;
					color: var(--contentFontLightColor);
				}
				> view {
					.schoolName {
						font-weight: 700;
						color: var(--titleFontColor);
						line-height: 44rpx;
					}
					.hyzt {
						width: 104rpx;
						height: 48rpx;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
		.img_box {
			.banner_img {
				width: 100%;
				height: 360rpx;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
			}
		}
	}
}
</style>
